<style lang="less">
@theme-color: #66B1FF;
@max-width: 100%;
@min-width: 1100px;

.layout {
    width: 100%;
    max-width: @max-width;
    min-width: @min-width;
    margin: 0 auto;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;

    .welcome {
        text-align: center;
        padding: 200px 20px;

        h2 {
            margin-bottom: 15px;
            color: #333;
        }

        p {
            color: #666;
            margin-bottom: 10px;
        }
    }
}

.layout-header {
    width: 100%;
    height: 80px;
    background-color: @theme-color;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
        color: #fff;
    }

    .right {
        .top {
            span {
                margin-right: 10px;
                font-size: 15px;
            }
        }

        .bottom {
            margin-top: 10px;
            font-size: 14px;
            color: #fff;
        }
    }
}

.layout-section {
    width: 100%;
    display: flex;

    .aside {
        width: 220px;
        min-height: 1000px;
        background-color: #f0f0f0;
        padding: 20px;

        >div {
            border-bottom: 1px solid #fff;
            padding: 20px 10px;

            a {
                font-weight: bold;
                font-size: 18px;

                &.active {
                    color: @theme-color;

                }
            }

            span {
                font-weight: bold;
                font-size: 18px;
            }

            ul {
                li {
                    a {
                        font-size: 16px;
                        display: block;
                        padding: 10px 20px;
                    }
                }
            }
        }
    }

    .main {
        width: calc(100% - 220px);
        min-height: 1000px;
        background-color: #e0e0e0;
    }

    .main-nav {
        background-color: #f0f0f0;
        padding: 5px 20px;
        border-left: 1px solid #e0e0e0;

        a {
            display: inline-block;
            padding: 10px 25px;
            position: relative;
            background-color: #fff;
            margin-right: 5px;

            span {
                font-size: 14px;
            }

            i {
                position: absolute;
                right: 5px;
                top: 0px;
            }

            &.active {
                color: @theme-color;
            }
        }
    }

    .main-content {
        padding: 5px 20px;
    }
}

.aside {
    [class^="el-icon"] {
        vertical-align: middle;
        margin-right: 10px;
        font-size: 20px;
    }

    span {
        vertical-align: middle;
    }

    >div {
        background-color: #F0F0F0;
    }
}

// 入场
.cate-enter,
.article-enter {
    height: 0px;
}

.cate-enter-active,
.article-enter-active {
    transition: all .2s linear;
}

.cate-enter-to {
    height: 136px;
}

.article-enter-to {
    height: 88px;
}


// 离场
.cate-leave-to,
.article-leave-to {
    height: 0px;
}

.cate-leave-active,
.article-leave-active {
    transition: all .2s linear;
}

.cate-leave {
    height: 136px;
}

.article-leave {
    height: 88px;
}
</style>

<template>
    <div class="layout"
        v-bind:style="`max-width:${$store.state.maxWidth};font-size:${$store.state.fontSize};font-family:${$store.state.fontFamily};`">

        <header class="layout-header">
            <div class="logo">
                <h3>[北业]博客管理系统</h3>
            </div>
            <div class="right">
                <div class="top">
                    <span>{{ username }}</span>
                    <el-button type="danger" plain size="mini" @click="logoutFn">退出</el-button>
                </div>
                <div class="bottom">
                    {{ loginTime }}
                </div>
            </div>
        </header>

        <section class="layout-section">
            <aside class="aside">
                <!-- 左侧菜单 -->
                <div>
                    <router-link active-class="active" to="/home">
                        <i class="el-icon-s-home"></i>
                        <span>主页</span>
                    </router-link>
                </div>
                <div><router-link active-class="active" to="/banner">轮播图</router-link></div>
                <div>
                    <div @click="isShowCate = !isShowCate">
                        <i class="el-icon-menu"></i>
                        <span>导航管理</span>
                    </div>
                    <transition name="cate">
                        <ul style="margin-top: 10px;" v-if="isShowCate">
                            <li><router-link active-class="active" to="/work_life">工作生活</router-link></li>
                            <li><router-link active-class="active" to="/skill_learn">技能学习</router-link></li>
                            <li><router-link active-class="active" to="/my_hobby">兴趣爱好</router-link></li>
                        </ul>
                    </transition>
                </div>
                <div>
                    <div @click="isShowArtice = !isShowArtice">
                        <i class="el-icon-edit"></i>
                        <span>博客管理</span>
                    </div>

                    <transition name="article">
                        <ul style="margin-top: 10px;" v-if="isShowArtice">
                            <li><router-link active-class="active" to="/publish_article">发布文章</router-link></li>
                            <li><router-link active-class="active" to="/article_list">文章列表</router-link></li>
                        </ul>
                    </transition>
                </div>
                <div>
                    <router-link active-class="active" to="/user">
                        <div>
                            <i class="el-icon-s-custom"></i>
                            <span>用户管理</span>
                        </div>
                    </router-link>
                </div>
                <div>
                    <router-link active-class="active" to="/setting">
                        <div>
                            <i class="el-icon-setting"></i>
                            <span>系统界面设置</span>
                        </div>
                    </router-link>
                </div>
            </aside>

            <main class="main">
                <!-- 右侧内容 -->
                <nav class="main-nav">
                    <router-link active-class="active" v-for="item in navList" :key="item.id" :to="{ path: item.path }">
                        <span>{{ item.text }}</span>
                        <i @click="closeTabFn(item.text)" style="font-style: normal;font-size: 20px;">×</i>
                    </router-link>
                </nav>

                <div class="main-content">

                    <!-- <h3>欢迎登录YY博客</h3> -->
                    <div v-if="isWelcome" class="welcome">
                        <h2>YY后台管理系统</h2>
                        <p>您目前是管理员角色~~</p>
                        <p>系统版本: V1.0.0</p>
                        <p>更新时间: 2025-10-15 </p>
                    </div>

                    <!-- 二级路由出口 -->
                    <router-view v-else />

                </div>
            </main>
        </section>

    </div>
</template>

<script>
import { mapState } from "vuex"
import { isLogined } from '@/api/index'
export default {
    data() {
        return {
            isWelcome: true,
            isShowCate: false,
            isShowArtice: false,
            username: "",
            loginTime: "",
        }
    },
    computed: {
        // 把state对象下的数据映射到组件中
        ...mapState(["navList"])
    },
    methods: {
        // 判断用户是否登录的方法
        async isLoginedFn() {
            let token = localStorage.getItem("AUTO_TOKEN");
            if (token) {
                await isLogined({token}).then(
                    resData => {
                        console.log(resData)
                        if(resData.code  != 200){
                            this.username =  "未登录"
                            this.loginTime = ""
                            localStorage.removeItem("ACCOUNT")
                            localStorage.removeItem("AUTO_TOKEN")
                            localStorage.removeItem("USERNAME")
                            if(confirm("您还没登录是否跳转登录?")){
                               this.$router.replace({path:"/login"}).catch(()=>{})
                            }
                        }
                    }
                )
            }
            else {
                if(confirm("您还没登录是否跳转?")){
                    this.$router.replace({path:"/login"}).catch(()=>{})
                }
            }

        },
        // 点击退出登录
        logoutFn() {
            if (confirm("您要退出登录吗")) {
                localStorage.removeItem("AUTO_TOKEN")
                localStorage.removeItem("USERNAME")
                localStorage.removeItem("ACCOUNT")
                localStorage.removeItem("AUTO_TOKEN")
                setTimeout(() => {
                    this.$router.replace({ path: "/login" }).catch(() => { })
                }, 150)
            }
        },

        // 把mutations下的方法映射到组件中
        // ...mapMutations(["closeTab"]), 
        // 关闭当前标签窗口
        closeTabFn(text) {
            let arr = this.navList.filter(item => item.text != text)
            console.log("--->", arr)
            this.$store.commit("closeTab", arr);
            let len = arr.length;
            if (len == 0) {
                setTimeout(() => {
                    this.$router.push({ path: "/" }).catch(() => { })
                }, 0)
                return false;
            }
            let path = arr[len - 1].path;
            setTimeout(() => {
                this.$router.push({ path: path }).catch(() => { })
            }, 0)
        }
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute)
                if (newRoute.path == "/") {
                    this.isWelcome = true;
                }
                else {
                    this.isWelcome = false;
                }
            }
        }
    },
    created() {
        let username = localStorage.getItem("USERNAME");
        if (username) {
            this.username = username;
            // 设置日期时间
            let date = new Date();
            let d = date.toLocaleDateString();
            let t = date.toLocaleTimeString();
            this.loginTime = d + " " + t;
        }

        this.isLoginedFn();// 判断用户是否登录
    }
}
</script>